<template>
  <div class="app-container">
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane label="基础信息" class="form-tabs-tab-pane">
            <!-- 栏目类型 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('infoCategory.type')" prop="type">
                  <el-select
                    v-model="form.type"
                    :placeholder="$t('common.pleaseSelect')+$t('infoCategory.type')"
                    clearable
                  >
                    <el-option label="列表" value="1" />
                    <el-option label="单页" value="2" />
                    <el-option label="自定义链接" value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 模型占位，默认信息模型 -->

            <!-- 上一级栏目 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('infoCategory.parent_name')"
                  prop="parent_id"
                >
                  <jsp-categorytree-picker
                    type="radio"
                    node-key="id"
                    :tree-data="parentTreeData"
                    :placeholder="$t('infoCategory.parent_name_tips')"
                    :dialog-tips="$t('infoCategory.parent_name_tips')"
                    :expand-all="false"
                    :default-checked-keys="[]"
                    default-checked-labels=""
                    height="300px"
                    @change="parentCateChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 栏目名称 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('infoCategory.name')" prop="name">
                  <el-input v-model="form.name" :placeholder="$t('infoCategory.name_tips')" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 栏目图标 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('infoCategory.icon')" prop="icon">
                  <jsp-icon-picker v-model="form.icon" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 封面图 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.cover_image')"
                  prop="cover_image"
                >
                  <jsp-image-upload
                    :default-list="cover_imageList"
                    action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
                    :limit="1"
                    :size="2"
                    :multiple="false"
                    accept=".jpg,.png,.gif"
                    @success="handleImageUploadSuccss"
                    @change="handleImageUploadChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 关键词 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.keywords')" prop="keywords">
                  <jsp-tags
                    :data="form.keywords"
                    :limit="20"
                    @change=" (tags) => form.keywords = tags "
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 栏目描述 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('infoCategory.description')"
                  prop="description"
                >
                  <el-input
                    v-model="form.description"
                    type="textarea"
                    :placeholder="$t('infoCategory.description_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 链接地址 -->
            <el-row v-show="form.type == 3" :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.href')" prop="href">
                  <el-input
                    v-model="form.href"
                    :placeholder="$t('common.href_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 打开方式 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.href_target')"
                  prop="href_target"
                >
                  <el-select
                    v-model="form.href_target"
                    :placeholder="$t('common.href_target_tips')"
                    clearable
                  >
                    <el-option label="本窗口" value="_self" />
                    <el-option label="新窗口" value="_blank" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 链接关系XFN -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.rel')" prop="rel">
                  <el-select
                    v-model="form.rel"
                    :placeholder="$t('common.rel_tips')"
                    clearable
                  >
                    <el-option label="禁止搜索引擎跟踪链接" value="nofollow" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 发布状态 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.status')"
                  prop="status"
                >
                  <el-select
                    v-model="form.status"
                    :placeholder="$t('common.status_tips')"
                    clearable
                  >
                    <el-option label="已发布" value="1" />
                    <el-option label="未发布" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="模板信息" class="form-tabs-tab-pane">
            <!-- 栏目首页 -->
            <el-row
              v-show="form.type == '' || form.type == 1"
              :gutter="20"
              type="flex"
              justify="center"
            >
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('infoCategory.index_template')"
                  prop="index_template"
                >
                  <el-select
                    v-model="form.index_template"
                    :placeholder="$t('infoCategory.index_template_tips')"
                    clearable
                  >
                    <el-option label="index.html" value="index" />
                    <el-option label="index_1.html" value="index_" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 栏目列表 -->
            <el-row
              v-show="form.type == '' || form.type == 1"
              :gutter="20"
              type="flex"
              justify="center"
            >
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('infoCategory.list_template')"
                  prop="list_template"
                >
                  <el-select
                    v-model="form.list_template"
                    :placeholder="$t('infoCategory.list_template_tips')"
                    clearable
                  >
                    <el-option label="list.html" value="list" />
                    <el-option label="list_1.html" value="list_" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 内容页 -->
            <el-row
              v-show="form.type == '' || form.type == 1"
              :gutter="20"
              type="flex"
              justify="center"
            >
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('infoCategory.article_template')"
                  prop="article_template"
                >
                  <el-select
                    v-model="form.article_template"
                    :placeholder="$t('infoCategory.article_template_tips')"
                    clearable
                  >
                    <el-option label="article.html" value="article" />
                    <el-option label="article_1.html" value="article_1" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 单页模板 -->
            <el-row
              v-show="form.type == 2"
              :gutter="20"
              type="flex"
              justify="center"
            >
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('infoCategory.page_template')"
                  prop="page_template"
                >
                  <el-select
                    v-model="form.page_template"
                    :placeholder="$t('infoCategory.page_template_tips')"
                    clearable
                  >
                    <el-option label="page.html" value="page" />
                    <el-option label="page_1.html" value="page_1" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

        <el-row :gutter="20" type="flex" justify="center" class="btn-row">
          <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">{{ $t('common.submit') }}</el-button>
              <el-button @click="resetForm">{{ $t('common.reset') }}</el-button>
              <el-button @click="onCancel">{{ $t('common.cancel') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import JspImageUpload from '@/components/JspImageUpload'
import JspIconPicker from '@/components/JspIconPicker'
import JspCategorytreePicker from '@/components/JspCategorytreePicker'
import JspTags from '@/components/JspTags'

// export
export default {
  name: 'InfoCategoryEdit',
  components: {
    JspImageUpload,
    JspIconPicker,
    JspCategorytreePicker,
    JspTags
  },
  data() {
    return {
      form: {
        type: '',
        parent_id: '',
        name: '',
        icon: '',
        cover_image: '2', // 数字之间逗号隔开
        keywords: [],
        description: '',
        href: '',
        href_target: '',
        rel: '',
        sort: 999,
        status: '',
        index_template: '',
        list_template: '',
        article_template: '',
        page_template: ''
      },
      // 封面图列表: 请求附件接口
      cover_imageList: [
        {
          id: 2,
          name: 'food.jpeg',
          url: 'http://pic.baike.soso.com/p/20130402/20130402143317-1824467319.jpg',
          path: '/uploads/101.jpg'
        }
      ],
      // 表单输入校验 ，通过prop="name"属性进行控制
      rules: {
        type: [{ required: true, message: '请选择栏目类型', trigger: 'change' }],
        name: [
          { required: true, message: '请填写栏目名称', trigger: 'blur' },
          { min: 2, max: 30, message: '字数在 2-30 个', trigger: 'blur' }
        ]
      },
      // 上级栏目数据
      parentTreeData: [
        {
          id: 1,
          parent_id: 0,
          label: '一级 1',
          children: [
            {
              id: 4,
              parent_id: 1,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  parent_id: 4,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  parent_id: 4,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          parent_id: 0,
          label: '一级 2',
          children: [
            {
              id: 5,
              parent_id: 2,
              label: '二级 2-1'
            },
            {
              id: 6,
              parent_id: 2,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          parent_id: 0,
          children: [
            {
              id: 7,
              parent_id: 3,
              label: '二级 3-1'
            },
            {
              id: 8,
              parent_id: 3,
              label: '二级 3-2'
            }
          ]
        }
      ],
      // 路由参数
      routerParams: {}
    }
  },
  computed: {},
  created() {
    this.routerParams = this.$route.params
    this.getDetail()
  },
  methods: {
    /** *********************************************** 表单相关 开始 ******************************************************/
    // 内容详情
    async getDetail() {
      // 路由参数
      const { id } = this.routerParams
      this.form.id = id
      if (id > 0) {
        // 请求内容接口：数据不存在报异常则关闭当前标签返回上一页或首页
        // 请求附件接口
        // await coding...
      }
    },
    // 提交表单
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 请求内容接口
          console.log(this.form)
          this.$message.success('提交!')
        } else {
          this.$message.error('提交失败!')
          return false
        }
      })
    },
    // 取消/返回
    onCancel() {
      // 删除当前页标签并返回上一页
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
      // this.$message.info('已取消！')
    },
    // 表单重置
    resetForm() {
      this.$refs['form'].resetFields()
    },
    /** *********************************************** 表单相关 结束 ******************************************************/

    /** ******************************************* 封面图上传 开始 **************************************************/
    handleImageUploadSuccss(response, file, fileList) {
      console.log('上传成功事件', response, file, fileList)
      // 判断response是否上传成功
      this.$message.success('上传成功')
    },
    handleImageUploadChange(result) {
      console.log('改变事件', result)
      this.cover_image = this.ids
    },
    /** ******************************************* 封面图上传 结束 **************************************************/
    // 选择上级栏目
    parentCateChange(e) {
      // console.log(e);
      this.parent_id = e.checkedKeys
    }
  }
}
</script>

<style scoped lang="scss">
</style>
